<template>
  <div class="skycity">
    <div class="contentBox">
      <div class="skyContent1">
        <h1 class="contentTitle">天空之城新品体验官招募</h1>
        <div class="contentImgBox">
          <img
            src="https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1651745825012-ca11b5652c0cb93f62a7f7ccca259fc2.jpg"
            alt="" class="contentImg" />
        </div>
        <!-- 旋即有戏 -->
        <div class="playBox">
          <h1 class="padding palyTitle">旋即有戏</h1>
          <p class="padding palyDesc">
            天空之城新品体验官招募活动正式开启！
            成为新品体验官，抢先体验大疆全球首发新品，成功完成任务，可获得作品展示机会，更有机会免费获得新品！
          </p>
          <div class="btnBox">
            <el-button type="primary" class="btn" round>免费体验</el-button>
            <el-button round class="btn">立即订阅 ></el-button>
            </el-button>
          </div>
        </div>
      </div>
      <!-- 活动流程 -->
      <div class="skyContent2">
        <div class="activityFlow">
          <div class="stepTitle">活动流程</div>
          <div class="stepDesc">
            <el-steps align-center>
              <el-step title="提交申请">
                <div slot="description">
                  <div class="text">
                    填写申请表并提交
                  </div>
                  <div class="date">
                    5月5日 - 5月18日
                  </div>
                </div>
              </el-step>
              <el-step title="人工审核">
                <div slot="description">
                  <div class="text">
                    天空之城组委会审核资料
                  </div>
                  <div class="date">
                    5月24日
                  </div>
                </div>
              </el-step>
              <el-step title="公布名单">
                <div slot="description">
                  <div class="text">
                    天空之城组委会专人联系
                  </div>
                  <div class="date">
                    5月25日-5月30日
                  </div>
                </div>
              </el-step>
              <el-step title="签署合约" description="签约后正式成为新品体验官"></el-step>
              <el-step title="完成任务" description="收到产品后按照要求完成体验报告等任务"></el-step>
            </el-steps>
          </div>
        </div>
      </div>
      <!-- 活动规则 -->
      <div class="skyContent3">
        <div class="activityRules">
          <h1 class="title">活动规则</h1>
          <div class="rulesItem" v-for="(item,index) in rulesData">
            <!--条数 -->
            <div class="number">{{item.id}}.</div>
            <!-- 规则desc -->
            <div class="descTxt">{{item.value}}</div>
          </div>
        </div>
      </div>
      <!-- 联系我们 -->
      <div class="skyContent4">
        <div class="contractBox">
          <div class="email">
            <svg t="1651992888259" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5945" width="60" height="60">
              <path
                d="M527.247 204.247c113.891 0 227.885 0.717 341.777-0.307 60.373-0.511 88.923 25.48 88.31 87.491-1.434 139.474 0.408 278.947-0.82 418.42-0.716 78.18-31.926 107.241-111.333 107.343-218.573 0.307-437.044 0.307-655.618-0.204-77.667-0.205-124.84-46.764-125.25-123.613-0.716-125.557-0.511-251.114-0.204-376.568 0.204-81.454 30.289-111.845 114.403-112.664 116.245-1.126 232.49-0.307 348.735-0.307v0.41z m-9.21 558.611c109.287 0 218.676-1.33 327.963 0.614 41.443 0.716 58.225-12.382 57.304-55.667-2.252-104.58-0.307-209.364-1.33-314.045-0.103-17.09 9.414-40.625-12.485-49.834-19.954-8.391-32.642 10.13-47.07 21.693-96.906 77.36-195.653 152.572-291.023 231.774-31.517 26.196-51.573 25.275-82.272-0.102-97.11-80.533-197.084-157.484-295.012-237.095-13.098-10.642-25.378-23.74-41.648-19.136-21.08 6.038-13.2 27.22-13.303 42.057-0.716 99.975 1.33 200.052-0.716 300.027-1.126 56.485 23.536 80.328 78.69 79.816 106.831-0.818 213.867-0.204 320.902-0.102zM139.525 262.677c19.851 18.317 25.991 24.763 32.95 30.29 60.885 48.298 121.259 97.211 182.86 144.384 159.837 122.488 160.246 122.488 316.707-2.148 66.41-52.904 131.492-107.343 211.205-172.628-255.411 0.102-490.562 0.102-743.722 0.102z"
                fill="#888889" p-id="5946" data-spm-anchor-id="a313x.7781069.0.i14"
                class="selected"></path>
            </svg>
          </div>
          <h1 class="title">联系我们</h1>
          <p>skypixel.contact@dji.com</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    // Nav: () => import("../../components/Nav.vue"),
  },
  props: {},
  data() {
    return {
      rulesData: [
        { id: 1, value: '新品体验官申请通过审核后，工作人员将电话联系申请者。如申请者5个工作日内没有将已签署的试用协议以及产品寄送地址提供给活动主办方，视为弃权。' },
        { id: 2, value: '新品体验官享有28天的产品体验期（从用户签收当天起到用户寄回产品当天截止）。' },
        { id: 3, value: '新品体验官须提供一条产品测评/开箱/实拍视频与一篇产品体验图文报告。' },
        { id: 4, value: '新品体验官须在天空之城、大疆社区以及至少在一个社媒平台（例如抖音、微博、Bilibili、小红书等）个人账号发布以上视频及图文内容。' },
        { id: 5, value: '新品体验官须配合参与用户访谈，并授权大疆编辑、发布、传播或以其他方式使用新品体验官在用户访谈中提供的所有内容（包括文字、图像、视频）。' },
        { id: 6, value: '在产品体验以及产品运回期间，如产品丢失或因人为使用/保存不当发生故障或损坏，申请者需向活动主办方缴纳赔偿金，赔偿金额为产品在大疆官方商城售价。' },
        { id: 7, value: '产品的所有权完全归活动主办方所有。免费获取奖品的用户将由活动主办方根据其完成任务的质量确定。 产品体验期结束后，若活动参与者无故占用试用产品或拒绝归还，活动主办方有权采取相关法律手段。' },
        { id: 8, value: '新品体验官须保证在本活动中提交的所有内容均不侵犯第三人权利，若使用他人故事、 照片、视频、音乐均须事先取得权利人同意，否则由此产生的问题由新品体验官负责。 新品体验官须授权大疆编辑、发布、传播或以其他方式使用新品体验官在活动中提交的文字、图像、视频等全部内容。' },
        { id: 9, value: '本次活动解释权归活动主办方“天空之城”所有，如活动参与者有违反活动规则的行为， 一经发现，活动主办方有权取消其参与资格，并要求新品体验官立即将产品返还给活动方。' },
      ]
    };
  },
  watch: {},
  computed: {},
  mounted() {
  },
  methods: {

  },
  created() { },
};
</script>
<style scoped lang="scss">
.contentBox {
  background-color: #f7f8f9;
  .skyContent1 {
    margin: 0 auto;
    width: 960px;
  }
  .contentImgBox,
  .contentImg {
    width: 960px;
    height: 320px;
  }
  .contentTitle {
    padding: 50px 0 30px;
    font-size: 45px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
  .playBox {
    margin: 50px 0;
    .padding {
      padding: 8px 0;
    }
    .palyTitle {
      font-size: 30px;
    }
    .palyDesc {
      padding: 0 80px;
    }
    .btnBox {
      margin: 30px 0;
      .btn {
        padding: 12px 35px !important;
      }
    }
  }
}
.skyContent2 {
  border-top: 1px solid #e9e9ea;
  border-bottom: 1px solid #e9e9ea;
  padding: 80px 0;
  .activityFlow {
    width: 960px;
    margin: 0 auto;
    .stepTitle {
      font-size: 30px;
      font-weight: bold;
      padding-bottom: 30px;
    }
    &::v-deep .el-step__title.is-wait {
      color: #252525;
      font-weight: bold;
    }
    &::v-deep .el-step__icon.is-text {
      background-color: #252525;
      border-color: #252525;
    }
    &::v-deep .el-step.is-center .el-step__description {
      color: #595959;
      padding-left: 12px;
      padding-right: 12px;
    }
    .date {
      color: #9b9c9d;
    }
  }
}
.skyContent3 {
  padding-bottom: 30px;
  border-bottom: 1px solid #e9e9ea;
}
.activityRules {
  width: 960px;
  margin: 0 auto;
  .title {
    padding: 50px 0;
    font-size: 30px;
  }
  .rulesItem {
    display: flex;
    text-align: center;
    width: 640px;
    margin: 0 auto;
    padding-bottom: 20px;
    font-size: 16px;
  }
  .descTxt {
    width: 620px;
    text-align: left;
  }
}
.skyContent4 {
  padding: 60px 0;
}
.contractBox {
  width: 960px;
  margin: 0 auto;
  text-align: center;
  .title {
    font-size: 30px;
    font-weight: bold;
  }
}
</style>
